@use '../../variables';

$block: '.#{variables.$ns}numeric-arrows';

#{$block} {
    --_--border-width: var(--g-text-input-border-width, 1px);

    width: 24px;
    height: fit-content;

    &,
    &__separator {
        border-width: var(--_--border-width);
        border-color: var(--_--arrows-border-color);
    }

    &_size {
        &_s {
            --g-button-height: 11px;
        }

        &_m {
            --g-button-height: 13px;
        }

        &_l {
            --g-button-height: 17px;
        }

        &_xl {
            --g-button-height: 21px;
        }
    }

    &__separator {
        width: 100%;
        height: 0px;
        border-block-start-style: solid;
    }
}
